<template>
  <div class="user-avatar">
    <a-avatar v-if="sysUser.avatar" :src="sysUser.avatar" :size="size" />
    <a-avatar
      :style="{
        backgroundColor: sysUser.sex === '2' ? '#eb2f96' : '#1677ff',
      }"
      v-if="!sysUser.avatar"
      :size="size"
    >
      {{ sysUser.nickname?.substring(0, 1) }}
    </a-avatar>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  export default defineComponent({
    name: 'UserAvatar',
    props: {
      size: {
        type: Number,
        default: 100,
      },
    },
    setup() {
      const userStore = useUserStore();
      const sysUser = computed(() => userStore.getUserInfo);

      return { sysUser };
    },
  });
</script>
<style lang="less">
  .user-avatar {
    text-align: center;
  }
</style>
